<template>
  <div class="inConbox clearfix det_bg">
    <!-- 头部 -->
    <Nav :URL="urls.url" :text="urls.text"></Nav>
    <!-- 内容 -->
    <section class="user_balance_box">
      <!-- teb切换 -->
      <div class="Order_adm_teb dip ju_al_bet">
        <span class="Order_adm_teblist" v-for="(items,index) in tebOrderAdm" :key="index" @click="getOrderADm(index)" :class="{'tebOrderactive':items.ind}">{{items.text }}</span>
      </div>
      <!-- 列表 -->
      <ul class="Order_adm_ul dipW clearfix" :class="{'mArginTOP_order':MArgin_TOPORDER}">
        <li class="Order_adm_list clearfix dipW" v-for="(listd,index) in OrderAdmlist.orders" :key="index" @click="getorderAdmDetilas(index,listd.id,listd.orderStatus)" v-show="listORderblock">
          <p class="Order_list_title dip ju_al_bet">
            <span class="Order_adm_date">订单日期：{{listd.createDate}}</span>
            <span class="Order_adm_state" v-if="listd.orderStatus == '已支付'">{{listd.orderStatus}}</span>
            <span class="Order_adm_state" v-if="listd.orderStatus == '已取消'">{{listd.orderStatus}}</span>
            <span class="Order_adm_state Order_adm_stateCor" v-if="listd.orderStatus == '待支付'">{{listd.orderStatus}}</span>
          </p>
          <div class="Order_list_con dip ju_al_lf">
            <span class="Order_list_ifonImg">
              <img :src="listd.path" alt="">
              <!-- <img :src="listd.picture" alt="" v-if="listd.picture"> -->
            </span>
            <section class="Order_Comm_title dip ju_al_bet">
              <p class="Order_Comm_text dipW ju_al_lf">
                <span class="user_con_ifontitleTop" v-if="listd.commodityName != null || listd.commodityName != undefined ">{{listd.commodityName}}</span>
                <span class="user_con_ifontitleTop" v-else>{{listd.orderType}}</span>
                <span class="user_con_ifontitlebom">¥&nbsp;{{listd.orderAmount}}</span>
              </p>
              <!-- <img src="../../../static/images/userifon/user_jiantou.png" alt="" class="user_con_ifonBoxjiantou" v-if="listd.commodityName != null || listd.commodityName != undefined"> -->
              <img src="../../../static/images/userifon/user_jiantou.png" alt="" class="user_con_ifonBoxjiantou">
            </section>
          </div>
        </li>
        <li class="ORder_adm_Nonedata" v-if="dataNone">暂无订单...</li>
      </ul>
    </section>
  </div>
</template>
<script>
import Nav from '../mallConent/mallTopNav'
export default {
  data(){
    return{
      urls:{
        url:'/bomNav/userContent',
        text:'订单管理',
      },
      tebOrderAdm:[
        {
          text:'全部',
          ind:true,
        }
        , {
          text:'已支付',
          ind:false,
        }
        , {
          text:'待支付',
          ind:false,
        }
      ],
      OrderAdmlist:'', //商品列表
      dataNone:false,//显示没有列表
      MArgin_TOPORDER:true,
      listORderblock:true,
    }
  }
  ,methods:{
    getOrderADm(ifs){
      for(var i = 0;i<this.tebOrderAdm.length;i++){
        this.tebOrderAdm[i].ind = false
      }
      this.tebOrderAdm[ifs].ind = true
      if(ifs == 1){
        this.OrderAdm(1,'已支付')
      }else if(ifs == 2){
        this.OrderAdm(1,'待支付')
      }else{
        this.OrderAdm(1)
      }
    },
    getorderAdmDetilas(nis,id,type){
      var COMMd = this.OrderAdmlist.orders[nis].orderType 
      var COMMorderStatus = this.OrderAdmlist.orders[nis].orderStatus
      // console.log(this.OrderAdmlist.orders[nis].orderAmount)
      // console.log(COMMd)
      if(COMMd == "商品"){ //判断是不是商品
        this.$store.dispatch('showloader')      
        this.axios.post(this.$busPoat.paid(),{
          "orderId":id
        }).then(res =>{
           var st;
          clearTimeout(st)
          st = setTimeout(() =>{
            if(res != null || res != undefined){
            this.$store.dispatch('hideloader')
            sessionStorage.setItem('orderAdmCOMM',JSON.stringify(res.data))     
            this.$router.push({
              path:'/bomNav/orderAdm/orderAdmDetilas'
            })
            // this.OrderAdmlist =JSON.parse(sessionStorage.getItem('orderAdm')) 
            // console.log(res.data)
            console.log(JSON.parse(sessionStorage.getItem('orderAdmCOMM')) )
           }else{
              alert('请求加载过慢...')
              this.$store.dispatch('hideloader')
            }
            clearTimeout(st)                                                                       
          },2000)
        }).catch(error=>{
           this.$store.dispatch('hideloader')
          alert('订单详情获取失败')    
        })
      }else if(COMMd == "充值" && COMMorderStatus == "待支付" ){
        this.$router.push({
          path:'/bomNav/userRecharge/1'
        })
        sessionStorage.setItem('moneyUSer',this.OrderAdmlist.orders[nis].orderAmount)
      }else if(COMMd == "提现" && COMMorderStatus == "待支付" ){
        this.$router.push({
          path:'/bomNav/userRecharge/2'
        })
        sessionStorage.setItem('moneyUSer',this.OrderAdmlist.orders[nis].orderAmount)
      }else{
        alert('亲，该订单没有详情页哦！！！')
      }
    },
    OrderAdm(numbrer,nullD){
      this.$store.dispatch('showloader')
      var nullds = nullD != '' ?nullD :null;
      this.axios.post(this.$busPoat.manage(),{
        "currentPage":numbrer,
        "pageSize":"5",
        "orderStatus":nullds
      }).then(res =>{
        console.log(res.data)
      // console.log( this.OrderAdmlist)
        var st;
        clearTimeout(st)
        st = setTimeout(() =>{
          if(res != null || res != undefined){
            if(res.data.iplancode == 200){
              if(res.data.orders.length >= 1){
                sessionStorage.setItem('orderAdm',JSON.stringify(res.data))
                this.OrderAdmlist =JSON.parse(sessionStorage.getItem('orderAdm')) 
                this.dataNone = false     
                this.MArgin_TOPORDER = true  
                this.listORderblock = true;
              }else{
                this.dataNone = true
                this.MArgin_TOPORDER = false
                this.listORderblock = false
              }
            }else{
              this.dataNone = true
              this.listORderblock = false
              this.MArgin_TOPORDER = false
            }
            this.$store.dispatch('hideloader')   
          }else{
            this.$store.dispatch('hideloader')            
            alert('请求加载过慢...')
          }
          clearTimeout(st)                                                                       
        },1000)            
      }).catch(error=>{
        this.$store.dispatch('hideloader')           
        alert('获取失败')
        this.listORderblock = false
        this.MArgin_TOPORDER = false
        this.dataNone = true        
      })
    }
  }
  ,components:{Nav} //引入组件
  ,created(){
    this.OrderAdm(1)
  }
}
</script>
<style lang="scss" scoped>
.det_bg{
  margin:0rem ;
  z-index: 51;
  height: 100%;
  background: #f2f2f2;
  // position: fixed;
}
.user_balance_box{
  margin-top:.8rem;
  width: 100%;
  height: 100%;
  color:#666;
  font-weight: 600;
  .Order_adm_teb{
    width: 100%;
    height: 0.8rem;
    background: #fff;
    position: relative;
    padding:0rem .76rem;
    .Order_adm_teblist{
      height: 100%;
      line-height: .8rem;
      font-size: .24rem;
    }
    .tebOrderactive{
      color:#FF7200;
      // padding-bottom:20%;
      border-bottom:.04rem solid #FF7200
    }
  }
  .Order_adm_ul{
    width: 100%;
    position: relative;
    // margin-top:.2rem;
    .Order_adm_list{
      padding:0rem .4rem;      
      background: #fff;
      width: 100%;
      margin-bottom:.1rem;
    }
    .ORder_adm_Nonedata{
      width: 100%;
      position: relative;
      top:0;
      left:0;
      background:#fff;
      font-size: .36rem;
      font-weight: 600;
      text-align: center;
      height: 4rem;
      line-height: 4rem;
    }
  }
  .mArginTOP_order{
    margin-top:.2rem;
  }
}
.Order_list_title{
  width: 100%;
  height: 0.86rem;
  border-bottom:.02rem solid #f2f2f2;
  .Order_adm_date{
    font-size: .24rem;
    color:#aaa;
  }
  .Order_adm_state{
    font-size: .26rem;
  }
  .Order_adm_stateCor{
    color:#FF7200;
  }
}
.Order_list_con{
  width: 100%;
  // height: 1.8rem;
  padding:.3rem 0rem .26rem 0rem;
  .Order_list_ifonImg{
    height: 1.24rem;
    max-width: 1.24rem;
    width: 18.51%;
    margin-right:4.5%;
    // background: #000;
    img{
      width: 100%;
      height: 100%;
    }
  }
  .Order_Comm_title{
    height: 1.24rem;
    width: 81.49%;
    .Order_Comm_text{
      padding:.2rem 0rem;
      height: 100%;
      max-width: 4.84rem;
      width: 93%;
      font-size: .24rem;      
      .user_con_ifontitleTop{
        width: 100%;
      }
      .user_con_ifontitlebom{
        color:#FF7200;
      }
    }
    .user_con_ifonBoxjiantou{
      width: 3%;
      height: 25%;
      margin-right:2%;
    }
  }
}
</style>
